<ui:composition template="../layout/layout.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
	
	<ui:define name="title">
		<h:outputText value="Usuário" />
	</ui:define>
	
	<ui:define name="content">
		<div id="path">
			<h1>Usuário</h1>
			<hr />
			<p id="crumb">Administração / Usuário</p>
		</div>
		<h2>Cadastro de Usuário</h2>
		<h:form prependId="false"  rendered="#{sessionScope.usuario.admin}">
				<h:outputLabel value="Administrador:" for="admin"/>	
				<h:selectBooleanCheckbox id="admin" value="#{usuarioMBean.usuario.admin}" />
				<br />
		
				<h:outputLabel value="Nome:" for="nome"/>
				<h:inputText id="nome" class="s300" value="#{usuarioMBean.usuario.nome}" required="true" requiredMessage="* O campo [Nome] é obrigatório!"/>
				<h:message for="nome" showSummary="true" showDetail="false" class="error"/>
				<br />
				
				<h:outputLabel value="CPF:" for="cpf"/>				
				<h:inputText id="cpf" class="s300" value="#{usuarioMBean.usuario.cpf}" required="true" requiredMessage="* O campo [CPF] é obrigatório!"/>
				<h:message for="cpf" showSummary="true" showDetail="false" class="error"/>
				<br/>

				<div>
					<h:outputLabel value="Categoria:" for="categoria" />				
					<h:selectOneMenu id="categoria" value="#{usuarioMBean.usuario.categoria}" required="true" requiredMessage="* O campo [Categoria] é obrigatório!">
						<f:selectItems value="#{categoriaUsuarioMBean.listaCategoriaUsuario}" var="#{categoria}" itemValue="#{categoria}" />
						<f:converter converterId="simpleEntityConverter"/>
					</h:selectOneMenu> 
					<a4j:commandButton onclick="#{rich:component('novaCategoria')}.show()" value="Nova Categoria" styleClass="button add" />
				</div>
				<h:message for="categoria" showSummary="true" showDetail="false" class="error"/>
				<br/>
				
				<h:outputLabel value="Email:" for="email"/>				
				<h:inputText id="email" class="s300" value="#{usuarioMBean.usuario.email}" required="true" requiredMessage="* O campo [Email] é obrigatório!"/>
				<h:message for="email" showSummary="true" showDetail="false" class="error"/>
				<br />
				
				<h:outputLabel value="Senha:" for="senha"/>				
				<h:inputSecret id="senha" class="s300" value="#{usuarioMBean.usuario.senha}" required="true" requiredMessage="* O campo [Senha] é obrigatório!"/>
				<h:message for="senha" showSummary="true" showDetail="false" class="error"/>
				
				<h:outputLabel value="Confirmar Senha:" for="confirmarsenha"/>				
				<h:inputSecret id="confirmarsenha" class="s300" value="#{usuarioMBean.confirmaSenha}" required="true" requiredMessage="* O campo [Confirma Senha] é obrigatório!"/>
				<h:message for="senha" showSummary="true" showDetail="false" class="error"/>
				
				<br /><br />
				
	            <h:commandButton onclick="validar_senha()" class="button check" value="Salvar" action="#{usuarioMBean.actionSalvar}" />
	            <h:commandButton class="button clear" value="Limpar" action="#{usuarioMBean.actionLimpar}" immediate="true" >
					<f:ajax render="@form"></f:ajax>
				</h:commandButton>
		</h:form>
		
		<div class="spacer"></div>
		
		<h:form  rendered="#{sessionScope.usuario.admin}">
			<h:dataTable styleClass="tabdefault" value="#{usuarioMBean.listaUsuario}" var="u">
				<h:column>
					<f:facet name="header">
						<h:outputText value="Id" />
					</f:facet>
					<h:outputText value="#{u.id}" />
				</h:column>
				<h:column sortBy="#{u.nome}">
					<f:facet name="header">
						<h:outputText value="Nome" />
					</f:facet>
					<h:outputText value="#{u.nome}" />
				</h:column>
				<h:column sortBy="#{u.categoria}">
					<f:facet name="header">
						<h:outputText value="Categoria" />
					</f:facet>
					<h:outputText value="#{u.categoria}" />
				</h:column>
				<h:column sortBy="#{u.email}">
					<f:facet name="header">
						<h:outputText value="Email" />
					</f:facet>
					<h:outputText value="#{u.email}" />
				</h:column>
				<h:column>
					<f:facet name="header">
						<h:outputText value="Ação" />
					</f:facet>
					<h:commandLink value="" title="Editar" >
						<f:setPropertyActionListener target="#{usuarioMBean.usuario}" value="#{u}" />
						<h:graphicImage library="images" name="ico_edit16x16.png" />
					</h:commandLink>
					
					<h:commandLink value="" action="#{usuarioMBean.actionRemover}" title="Remover">
						<f:setPropertyActionListener target="#{usuarioMBean.usuario}" value="#{u}" />
						<h:graphicImage library="images" name="ico_delete16x16.png" />
					</h:commandLink>
					
				</h:column>
			</h:dataTable>
		</h:form>
		
		<rich:popupPanel id="novaCategoria" >
			<f:facet name="header">
				<h:outputText value="Nova Categoria" style="float:left;" />
				<h:graphicImage value="/resources/images/modalclose.png"
					style="cursor:pointer; float:right;"
					onclick="#{rich:component('novaCategoria')}.hide()" />
			</f:facet>
			<h:form>
				<h:outputLabel value="Descrição:" />
				<h:inputText value="#{usuarioMBean.novaCategoria}" required="true" requiredMessage="O campo descrição é obrigratório"/><br />
				<h:commandButton styleClass="button check" value="Salvar" action="#{usuarioMBean.actionNovaCategoria}" 
					onclick="#{rich:component('novaCategoria')}.hide()" />
					
			</h:form>
		</rich:popupPanel>
		
	</ui:define>		
</ui:composition>